<template>
    <FormItem :option="option" :Value="Value" ref="FormItemEle">
        <component :is="ChildItem" ref="ObjectItem" :option="option" @UpdateEvent="UpdateEvent" :Value="Value"
            @SetError="SetError" />
    </FormItem>
</template>
<script setup>
import { shallowRef, ref, inject, nextTick } from 'vue'

const TemplateMapping = inject('TemplateMapping');
const FormItemMapping = TemplateMapping.Type
const ChildItem = shallowRef();
const emit = defineEmits(['UpdateValue', 'SetError'])



const FormItemEle = ref();
const props = defineProps(['option', 'ViewType', 'Level', 'Value']);

// 处理模板类型
const FormItem = shallowRef(TemplateMapping.Layout[props.ViewType || 'FormItem'])
ChildItem.value = FormItemMapping[props.option.type];

const UpdateEvent = (key, val) => {
    emit('UpdateValue', key, val);
}

const SetError = (val) => {
    nextTick(() => {
        if (FormItemEle.value?.SetErrorMessage) {
            FormItemEle.value.SetErrorMessage(val);
        }
        emit('SetError', val)
    })
}

defineExpose({
    SetError,
    ChildItem
})

</script>